<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('移库管理')"/>
    <style>
        [v-cloak] {
            display: none;
        }
        .el-date-editor.el-input, .el-date-editor.el-input__inner {
            width: 200px!important;
        }
        .el-input__icon {
            line-height: 0!important;
        }
        .tag {
            display: inline-block;
            padding: 0 5px;
            line-height: 22px;
            color: #FFFFFF;
            border-radius: 3px;
        }
        .el-dialog__header, .el-dialog__body {
            padding: 0!important;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>

                        <li>
                            移库单号：<input type="text" id="orderNum" name="orderNum"/>
                        </li>
                        <li>
                            原库区：<input type="text" id="areaCode" name="areaCode"/>
                        </li>
                        <li>
                            新库区：<input type="text" id="moveAreaCode" name="moveAreaCode"/>
                        </li>

                        <li>
                            <label>创建时间：</label>
                            <el-date-picker
                                name="startTime"
                                v-model="timeA"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                type="datetime"
                                @change="compareAB"
                                placeholder="开始时间">
                            </el-date-picker>
                            <span>-</span>
                            <el-date-picker
                                name="endTime"
                                v-model="timeB"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                type="datetime"
                                @change="compareAB"
                                placeholder="结束时间">
                            </el-date-picker>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()" @click="resetTime()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="btn-group-sm" id="toolbar" role="group">

<!--            <a class="btn btn-warning" onclick="$.table.exportExcel()">-->
<!--                <i class="fa fa-upload"></i> 导出全部-->
<!--            </a>-->
<!--            <a class="btn btn-info btn-del disabled" @click="partExcel()">-->
<!--                <i class="fa fa-upload"></i> 部分导出-->
<!--            </a>-->
            <a class="btn btn-primary" onclick="$.table.print()">
                <i class="fa fa-print"></i> 打印
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" data-mobile-responsive="true" style="white-space: nowrap"></table>
        </div>

    </div>
</div>

<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var prefix = ctx + "fpStor/fpMove";

    var app = new Vue({
        el: '.container-div',
        data: {
            timeA: '',
            timeB: '',
            innerVisible: false,
            msg: {
                postingTime: ''
            }
        },
        methods: {
            //时间对比
            compareAB: function(){
                if(this.timeA != '' && this.timeA != null){
                    if(this.timeB != '' && this.timeB != null){
                        var a = new Date(this.timeA);
                        var b = new Date(this.timeB);
                        if(a >= b){
                            $.modal.alertError("结束时间需大于开始时间，请重新选择！！");
                            this.timeA = '';
                            this.timeB = '';
                        }
                    }else{
                        this.timeB = '';
                    }
                }else{
                    this.timeA = '';
                    if(this.timeB == null){
                        this.timeB = '';
                    }
                }
            },
            //清空时间
            resetTime(){
                this.timeA = '';
                this.timeB = '';
            },
            //新增
            addBill(){
                var _url = prefix + "/add";
                $.modal.openFull("新增", _url);
            },
            //部分导出
            partExcel(){
                var rows = $.common.isEmpty($.table._option.uniqueId) ? $.table.selectFirstColumns() : $.table.selectColumns($.table._option.uniqueId);
                if(rows.length == 0){
                    $.modal.alertWarning("请至少选择一条记录");
                    return;
                }else{
                    $.modal.confirm("确认要导出选中的" + rows.length + "条数据吗?", function(){
                        var url = prefix + "/partExcel";
                        var data = {"ids": rows.join()};
                        $.post(url, data, function(result){
                            if(result.code == web_status.SUCCESS){
                                window.location.href = ctx + "common/download?fileName=" + encodeURI(result.msg) + "&delete=" + true;
                            }else if(result.code == web_status.WARNING){
                                $.modal.alertWarning(result.msg);
                            }else{
                                $.modal.alertError(result.msg);
                            }
                            $.modal.closeLoading();
                        });
                    });
                }
            },
            //获取前n天的日期
            getBeforeDate(n){
                var d = new Date();
                var year = d.getFullYear();
                var mon = d.getMonth() + 1;
                var day = d.getDate();
                if(day <= n){
                    if(mon > 1){
                        mon = mon - 1;
                    }else{
                        year = year - 1;
                        mon = 12;
                    }
                }
                d.setDate(d.getDate() - n);
                year = d.getFullYear();
                mon = d.getMonth() + 1;
                day = d.getDate();
                var s = year + '-' + (mon < 10 ? ('0' + mon) : mon) + '-' + (day < 10 ? ('0' + day) : day);
                return s;
            },
            //获取当前时间
            getTime(){
                var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
                var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
                var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
                var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
                var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                var time = year + "-" + month + "-" + day + " " + h + ":" + m + ":" + s;
                return time;
            },
            //Dialog取消按钮
            closeInnerVisible(){
                this.innerVisible = false;
                this.msg = {
                    postingTime: ''
                };
            },
            //Dialog确定按钮
            commitItems(){
                if($.validate.form('form-msg')){
                    console.log(this.msg)
                    this.closeInnerVisible();
                }
            }
        },
        created(){
            // this.timeA = this.getBeforeDate(30) + ' 00:00:00';
            // this.timeB = this.getBeforeDate(0) + ' 23:59:59';
        }
    })

    $(function () {
        var options = {
            url: prefix + "/list",
            importUrl: prefix + "/importData",
            importTemplateUrl: prefix + "/importTemplate",
            exportUrl: prefix + "/export",
            modalName: "移库管理",
            queryParams: queryParams,
            striped: true,
            columns: [
                {
                    checkbox: true
                },
                {
                    field: 'fpId',
                    title: '序号',
                    align: 'center',
                    visible: false
                },
                {
                    field: 'orderNum',
                    title: '移库单号',
                    align: 'center'
                },
                {
                    field: 'areaCode',
                    title: '原库区',
                    align: 'center',
                },
                {
                    field: 'moveAreaCode',
                    title: '新库区',
                    align: 'center',
                },
                {
                    field: 'carrierId',
                    title: '托盘号',
                    align: 'center'
                },
                {
                    field: 'createUserName',
                    title: '操作人员',
                    align: 'center',
                },
                {
                    field: 'createTime',
                    title: '创建时间',
                    align: 'center',
                    formatter: function(value, item, index){
                        if(value == null){
                            return '';
                        }else{
                            return value.slice(0, 19);
                        }
                    }
                }

            ]
        };
        $.table.init(options);
    });

    function queryParams(params){
        return {
            pageSize: params.limit,
            pageNum: params.offset / params.limit + 1,
            orderByColumn: params.sort,
            isAsc: params.order,
            startTime: app.timeA,
            endTime: app.timeB
        };
    }

</script>
</body>
<form id="importForm" enctype="multipart/form-data" class="mt20 mb10" style="display: none">
    <div class="col-xs-offset-1">
        <input type="file" id="file" name="file"/>
        <div class="mt10 pt5">
            <a onclick="$.table.importTemplate()" class="btn btn-default btn-xs"><i class="fa fa-file-excel-o"></i> 下载模板</a>
        </div>
        <font color="red" class="pull-left mt10">
            提示：仅允许导入“xls”或“xlsx”格式文件！
        </font>
    </div>
</form>
</html>
